
<!-- Start of first page
alert('use this to test javascript')
      //these 2 values are 0 when this javascript is called, cos dom and html were not fully loaded
      console.log(this.container.getBoundingClientRect().width);
      console.log(this.container.offsetWidth);
      console.log(this.container.clientWidth);
 -->


<div data-role="page">


    <script>
        // outside ready function so that buttons still have a var to attach function calls to like slider.next()
        var slider;

        $(document).one('pageshow',function(){
            $('#i').scroller({
                preset: 'date',
                invalid: { daysOfWeek: [0, 6], daysOfMonth: ['5/1', '12/24', '12/25'] },
                theme: 'default',
                display: 'modal',
                mode: 'scroller',
                dateOrder: 'mmD ddy'
            });
            $('#show').click(function(){
                $('#i').scroller('show');
                return false;
            });
            $('#clear').click(function () {
                $('#i').val('');
                return false;
            });
            // slider
            slider = new Swipe(document.getElementById('slider'), {
                callback: function(e, pos) {

                    var i = bullets.length;
                    while (i--) {
                        bullets[i].className = ' ';
                    }
                    bullets[pos].className = 'on';

                }
            }),
            bullets = document.getElementById('position').getElementsByTagName('em');
        });

    </script>


    <div data-theme="a" data-role="header">
        <?php echo CHtml::link("Back",array("site/dashboard"),array("data-icon"=>"home"))?>
        <h3>Offers</h3>
    </div>

    <div data-role="content" data-theme="a" id="home">

           <div id='slider' style="visibility: visible;">
                <ul>

                    <li style='display:block'>
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                            <label for="textinput2">
                                Offer Name:
                            </label>
                            <input name="" id="textinput2" placeholder="" value="" type="text" />
                            </fieldset>
                        </div>
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                            <label for="textinput7">
                                Price:
                            </label>
                            <input name="" id="textinput7" placeholder="" value="" type="text" />
                            </fieldset>
                        </div>
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                            <label for="textinput3">
                                Valid time:
                            </label>
                            <input name="" id="textinput3" placeholder="" value="" type="text" />
                            </fieldset>
                        </div>
                        <div data-role="fieldcontain">
                            <fieldset data-role="controlgroup">
                            <div id="demo_default" class="demos">
                            <label for="i">Offer Start Date:</label>
                            <input id="i" name="i"  />

                            <a href="#" id="show" class="btn">Show</a>
                            <a href="#" id="clear" class="btn">Clear</a>
                            </div>
                            </fieldset>
                        </div>

                    </li>

                    <li style='display:none'>
                        <div>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                    <label for="textinput4">
                                        Offer Status:
                                    </label>
                                    <input name="" id="textinput4" placeholder="" value="" type="text" />
                                </fieldset>
                            </div>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                <label for="select-choice-1" class="select">Payment method:</label>
                                <select name="select-choice-1" id="select-choice-1">
                                    <option value="visa">Visa Card</option>
                                    <option value="master">Master Card</option>
                                    <option value="amexpress">American Express</option>
                                    <option value="paypal">PayPal</option>
                                </select>
                                </fieldset>
                            </div>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                    <label for="textarea">
                                        Offer Description:
                                    </label>
                                    <textarea cols="40" rows="8" name="textarea" id="textarea"> </textarea>
                                </fieldset>
                            </div>
                        </div>
                    </li>

                    <li style='display:none'>
                        <div>
                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                <label for="voice">
                                   Voice Info:
                                </label>
                                <input type="url" id="voice" name="voice" value=""  />
                                </fieldset>
                            </div>

                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                <label for="video">
                                    Video:
                                </label>
                                <input type="url" id="video" name="video" value=""  />
                                </fieldset>
                            </div>

                            <div data-role="fieldcontain">
                                <fieldset data-role="controlgroup">
                                <label for="image">
                                    Picture:
                                </label>
                                <input type="url" id="image" name="image" value=""  />
                                </fieldset>
                            </div>
                        </div>
                    </li>
                </ul>

                <nav>
                    <a href='#' id='prev' onclick='slider.prev();return false;'><em> << </em></a>
                    <span id='position'><em class='on'>&bull;</em><em>&bull;</em><em>&bull;</em></span>
                    <a href='#' id='next' onclick='slider.next();return false;'><em> >> </em></a>
                </nav>
            </div><!--end slider -->

    </div> <!-- end content -->

    <div data-theme="a" data-role="footer">
        <!--
            <a data-role="button" data-transition="fade" href="#page1">
                Save
            </a>
            <a data-role="button" data-transition="fade" href="#page1">
                Delete
            </a>
           unused for the moment -->

        <div class="ui-grid-a" style="text-align: center;">

            <div class="ui-block-a"><button type="button" data-theme="a">Save</button></div>
            <div class="ui-block-b"><button type="button" data-theme="a">Delete</button></div>

        </div>

        <h6>&copy; echebao</h6>
    </div> <!-- end footer -->


</div>
<!-- /page -->


